/*
 * Copyright © 2016-2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "./fonts";
@import "./variables.scss";
@import "./modals.scss";

/*
NOTE: Always define CSS variables here (global scope). This is because if the
user customizes a value, currently our code will only look for the corresponding
variable in the 'document' DOM element and update the value. We should be careful
to never re/define a CSS variable in any local scope
*/

:root {
  --brand-primary-color: #{$brand-primary-color};
  --navbar-color: #{$navbar-bg};
  --font-family: #{$font-family-base}; // base font defined in bootstrap/scss/_variables.scss
  --page-name-color: #{$grey-04};
  --welcome-banner-image: #{$welcome_banner_image};
  --plugin-reference-heading-bg-color: #{$grey-03};
  --grey01: #{$grey-01};
  --grey02: #{$grey-02};
  --grey03: #{$grey-03};
  --grey04: #{$grey-04};
  --grey05: #{$grey-05};
  --grey06: #{$grey-06};
  --grey07: #{$grey-07};
  --grey08: #{$grey-08};
  --grey09: #{$grey-09};
  --grey10: #{$grey-10};
  --grey11: #{$grey-11};
}

html {
  position: relative;
  min-height: 100%;
  overflow-y: hidden;
}

body {
  background-color: white;
  min-width: $cdap_body_min_width;
  font-family: var(--font-family);

  #app-container {
    margin-top: 48px;
    overflow-y: auto;
    height: calc(100vh - (#{$height-of-footer} + #{$height-of-header})); // Header + footer heights
  }
  .container-fluid {
    padding-bottom: 52px; // footer height
  }

  $maxGridHeight: 210px;
  $minGridWidth: 10px;
  $maxGridWidth: 1fr;
  $headerBgColor: white;
  $borderColor: $grey-04;
  $header-light-color: $grey-04;

  /* This is the fallback for browsers that doesn't support css grid */

  .grid.grid-container {
    display: table;
    border-collapse: collapse;
    width: 100%;

    &.disabled,
    &.disabled * {
      cursor: not-allowed !important;
    }

    .grid-row {
      width: 100%;
      display: table-row;
      > strong,
      > div {
        display: table-cell;
      }
    }
    .grid-header {
      display: table-header-group;
      .grid-row {
        > * {
          display: table-cell;
          padding: 10px;
        }
      }
    }
    .grid-body {
      display: table-row-group;
      .grid-row {
        &:hover {
          background: $grey-08;
        }
        &:first-of-type > div { border-top: 0; }
        &:last-of-type > div { border-bottom: 0; }
      }
    }
  }

  .grid.grid-container.grid-sm {
    .grid-body {
      .grid-row {
        padding: 0;
      }
    }
  }

  /* End of css grid fallback */

  .grid {
    &.grid-container {
      max-height: $maxGridHeight;
      overflow-y: auto;
      display: grid;

      &.border-top-bottom {
        border-top: 2px solid $borderColor;
        border-bottom: 2px solid $borderColor;

        .grid-body > .grid-row:last-child {
          border-bottom: 0;
        }
      }

      &.disabled,
      &.disabled * {
        cursor: not-allowed !important;
      }

      .grid-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax($minGridWidth, $maxGridWidth));

        > strong,
        > div {
          border-left: 0;
          border-bottom: 0;
          padding: 5px;
          max-width: 100%;
          overflow: hidden;
          word-break: inherit;
          text-overflow: ellipsis;
        }
      }
      .grid-header {
        position: sticky;
        display: grid;
        top: 0;
        background: $headerBgColor;
        > .grid-row {
          border-bottom: 1px solid $grey-04;
          padding: 0;
          border-left: 0;
          border-right: 0;
          border-top: 0;
        }

        &.header-light {
          color: $header-light-color;
        }
      }
      .grid-body {
        display: grid;
        .grid-row {
          padding: 7px 0;
          align-content: center;
          align-items: center;
          border-bottom: 1px solid $grey-04;
          &.grid-link {
            cursor: pointer;
          }
          &:hover {
            background: $grey-08;
          }
          &.highlighted {
            border: 2px solid $green-03;
            background-color: rgba($green-03, 0.1);
          }
          > div {
            padding: 10px;
            &.grid-item-sm {
              padding: 0;
            }
          }
        }
        a {
          text-decoration: none;
        }
      }
    }
  }

  .grid.grid-container.grid-compact {
    .grid-header,
    .grid-body {
      .grid-row > div {
        padding: 5px 7px;
      }
    }

    .grid-header {
      background: $grey-08;
      color: $grey-02;
      font-weight: 600;
    }

    .grid-row {
      border-bottom: 1px solid $grey-06;
      min-height: 29px;
      padding: 0;
    }

    .grid-body .grid-row > div {
      border-right: none;
    }
  }

  /* Truncate text with ellipsis helper */
  .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
